<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>销量表</title>
    <style>
        /* CSS样式 */
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            padding: 0;
        }
        canvas {
            max-width: 600px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<h1>销量表</h1>

<div id="chartContainer">
    <canvas id="barChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // JavaScript代码
    // 模拟数据
    const hotwords = [
        { hotword: "鸢尾", count: 10 },
        { hotword: "百合", count: 15 },
        { hotword: "丁香", count: 5 },
        { hotword: "牡丹", count: 20 },
        { hotword: "玫瑰", count: 12 }
    ];

    // 提取热词和次数数据
    const labels = hotwords.map(hotword => hotword.hotword);
    const data = hotwords.map(hotword => hotword.count);

    // 获取画布元素
    const ctx = document.getElementById("barChart").getContext("2d");

    // 绘制柱状图
    new Chart(ctx, {
        type: "bar",
        data: {
            labels: labels,
            datasets: [{
                label: "销量",
                data: data,
                backgroundColor: "rgba(54, 162, 235, 0.6)",
                borderColor: "rgba(54, 162, 235, 1)",
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    precision: 0
                }
            }
        }
    });
</script>
</body>
</html>